<template>
  <div class="Mall4j con-box page-return-proof">
    <div
      class="con-box"
    >
      <div class="box-tit">
        {{ proofType===1?'申请客服介入' : '补充凭证' }}
      </div>
      <div class="box-content apply-return apply-box">
        <div class="item">
          <div class="tit">
            <span class="asterisk">*</span>{{ proofType===1?'申请理由：' : '凭证说明：' }}
          </div>
          <textarea
            v-model="buyerDesc"
            maxlength="200"
            class="shop-description"
            :placeholder="`请填写${proofType===1?'申请理由' : '凭证说明'}，不超过200字`"
          />
        </div>
        <div class="item">
          <div class="tit">
            <span class="asterisk">*</span>上传凭证：
          </div>
          <mul-pic-upload
            v-model="photoFiles"
            :limit="3"
          />
          <div class="img-des">
            （ 最多上传三张凭证 ）
          </div>
        </div>
        <div class="item">
          <div class="tit">
&nbsp;
          </div>
          <span
            class="btn"
            @click="onSubmit"
          >{{ proofType===1?'提交申请' : '提交' }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'

const route = useRoute()
const router = useRouter()
const photoFiles = ref('')

const proofType = ref(1)
let refundId = ''
let refundSn = ''
onMounted(() => {
  proofType.value = +route.query.proofType
  refundId = route.query.refundId
  refundSn = route.query.refundSn
  document.title = proofType.value === 1 ? '申请客服介入' : '补充凭证'
})

// 表单提交
const buyerDesc = ref('')
let isSubmit = false
const onSubmit = () => {
  // 退款说明
  if (!buyerDesc.value.trim()) {
    ElMessage.warning(`请输入${proofType.value === 1 ? '申请理由' : '凭证说明'}`)
    return
  }
  if (!photoFiles.value) {
    ElMessage.warning('请上传凭证')
    return
  }
  if (isSubmit) {
    return false
  }
  isSubmit = true

  let url = '/p/orderRefund/apply_platform_intervention' // 申请平台客服介入
  let method = 'put'
  if (proofType.value === 2) {
    url = '/p/orderRefundIntervention/saveInterventionVoucher' // 补充凭证
    method = 'post'
  }

  http({
    url,
    method,
    data: {
      refundId,
      sysType: 0,
      voucherDesc: buyerDesc.value,
      imgUrls: photoFiles.value
    }
  }).then(() => {
    ElMessage({
      message: `${proofType.value === 1 ? '申请成功' : '提交成功'}`,
      type: 'success',
      duration: 1500,
      onClose: () => {
        isSubmit = false
        router.replace({ path: '/return-detail', query: { refundSn } })
      }
    })
  }).catch(() => {
    isSubmit = false
  })
}

</script>
<style lang="scss" scoped>
@use "../common/scss/user-center";
@use "../common/scss/uc-edit";
</style>
